<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>档案管理阶段性授权</span>
      </div>
      <div class="div">
        <span class="solid" @click="send()">确认</span>
      </div>
    </header>
    <div class="jieshaoText">
      您将授权他人成为您的档案管理人员，您希望开放哪些信息查阅、修改的权限，请您选择（至少选择一项哦）：
    </div>
    <div class="content">
      <van-collapse v-model="activeNames" @change="labelChange()">
        <van-collapse-item v-for="(item, index) in list" :key="index" :title="item.dict_name" :name="index">
          <div class="divLabel" v-for="(childen, childenIndex) in item.oauths" :key="childenIndex">
            <div style="color: #333;font-size: 15px;">{{childen.title}}</div>
            <div class="selectDiv">
            <span @click.stop="justLook(childen)">
              <img src="../../../assets/方形未选中.png" v-show="childen.oauth_type !== 0  && childen.oauth_type !== 1" class="imgSelect" alt="">
              <img src="../../../assets/方形选中.png" v-show="childen.oauth_type === 0 || childen.oauth_type === 1" class="imgSelect" alt="">
            查阅
            </span>
              <span v-show="!inquiry_id" @click.stop="justUpdate(childen)">
                  <img src="../../../assets/方形未选中.png" v-show="childen.oauth_type !== 1" class="imgSelect" alt="">
                  <img src="../../../assets/方形选中.png" v-show="childen.oauth_type === 1" class="imgSelect" alt="">
                修改
              </span>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="bottom">
      <div class="allSelectDiv">
        <span class="shuoming">勾选右边的全选则所有的模块都将被您的档案管理人员查阅、修改</span>
        <span @click="allSelect()">
          <img src="../../../assets/方形未选中.png" v-show="isAllselect === false" class="imgSelect" alt="">
          <img src="../../../assets/方形选中.png" v-show="isAllselect === true" class="imgSelect" alt="">
          全选
        </span>
      </div>
      <div
        v-show="!inquiry_id && !$route.query.doc_user_id"
        class="label" style="height: 44px;border-top: 1px solid #E5E5E5"
           @click="selectDocShow = true">
        <span>指定医生：</span>
        <input type="text"
               style="width: 50%;text-align: right;border: none"
               readonly
               v-model="doc_user_name"
               placeholder="请选择指定医生">
      </div>
      <div v-show="!inquiry_id" class="riqi" @click="riqiShow = true">
        <p class="label" >
          <span>授权时间：</span>
          <span>
            <input class="inputBorder" v-model="start_date" readonly type="text">
            至
            <input class="inputBorder" v-model="end_date" readonly type="text">
          </span>
        </p>
      </div>
    </div>
    <van-calendar v-model="riqiShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  color="#1da4f2"
                  @confirm="onConfirm"
                  position="right" />
    <van-popup round
               position="bottom"
               :style="{ height: '80%', bottom: isShowtabbar? '0px' : '50px' }"
               v-model="selectDocShow">
      <header style="background: #FFFFFF;color: #333333;padding: 0 10px;box-sizing: border-box;border-bottom: 1px solid #E5E5E5">
        <div class="div">
          <span class="solid" @click="selectDocShow = false">返回</span>
        </div>
        <div class="div">
          <span >选择切换团队</span>
        </div>
        <div class="div">
          <span class="solid"  @click="confirmSelectDoc()">确认</span>
        </div>
      </header>
      <div class="box"
           @click="clickBox(item)"
           :class="popSelectItem.doc_user_id == item.USER_ID ? 'selectDoctor' : ''"
           v-for="(item, index) in docList" :key="index">
        <div class="box_left">
          <img v-if="item.PHOTO !== '' && item.PHOTO !== undefined && item.PHOTO !== null" :src="item.PHOTO" class="PHOTO" alt="">
          <img v-else-if="item.SEX ==1" src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
          <img v-else-if="item.SEX ==2" src="../../../assets/女医生@2x.png" class="PHOTO" alt="">
        </div>
        <div class="box_right">
          <ul>
            <li>
                  <span class="name">
                    <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
                    <!--              <span>|</span>-->
                    <!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
                    <!--              <span>|</span>-->
                    <!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
                  </span>
            </li>
            <li>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
              <span>|</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
            </li>
            <li>
              <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
              <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>
            </li>
          </ul>

        </div>
      </div>
      <van-empty
        style="width: 100%;height: 60%"
        v-show="docList.length <= 0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无医生"
      />
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
import $qs from 'qs'
export default {
  name: 'FileInformationList',
  data () {
    return {
      activeNames: [0],
      list: [],
      isAllselect: false,
      riqiShow: false,
      minDate: new Date(),
      maxDate: new Date(2030, 0, 1),
      selectDate: '',
      start_date: '',
      end_date: '',
      userid: this.$route.query.userid,
      qrcode: '',
      Olist: [],
      data_user_id: this.$route.query.data_user_id, // 当前被服务的人员
      doc_user_id: this.$route.query.doc_user_id, // 医生的id
      inquiry_id: this.$route.query.inquiry_id, // 服务订单的id
      doc_user_name: '', // 医生的姓名
      selectDocShow: false,
      popSelectItem: {
        doc_user_id: '',
        doc_user_name: ''
      },
      docList: [],
      isShowtabbar: sessionStorage.getItem('isShowtabbar')
    }
  },
  watch: {
    list: {
      handler (newVal, oldVal) {
        let isTrue = true
        this.list.forEach((item) => {
          item.oauths.forEach((curr) => {
            if (this.inquiry_id) {
              if (curr.oauth_type == '-1' || curr.oauth_type == -1) {
                isTrue = false
                return false
              }
            } else {
              if (!curr.oauth_type || curr.oauth_type == '-1' || curr.oauth_type == -1) {
                isTrue = false
                return false
              }
            }
          })
        })
        this.isAllselect = isTrue
      },
      deep: true
    }
  },
  mounted () {
    if (this.doc_user_id) {
      this.getHis()
    } else {
      this.getList()
      this.getDoctorList()
    }
    $('.content').css({height: $(window).height() - $('.content').offset().top - $('.bottom').height() - 50 + 'px'})
  },
  methods: {
    // 选医生确认
    confirmSelectDoc () {
      if (!this.popSelectItem.doc_user_id) {
        this.$toast('请先选择医生')
        return false
      }
      this.doc_user_id = this.popSelectItem.doc_user_id
      this.doc_user_name = this.popSelectItem.doc_user_name
      this.selectDocShow = false
    },
    // 选择医生点击
    clickBox (item) {
      this.popSelectItem.doc_user_id = item.USER_ID
      this.popSelectItem.doc_user_name = item.NICK_NAME
    },
    // 医生列表
    getDoctorList () {
      this.$http.findDoctor()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.docList = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取保存记录
    getHis () {
      this.$http.minihealthoauthDetail({
        doc_user_id: this.doc_user_id,
        data_user_id: this.$route.query.data_user_id,
        inquiry_id: this.$route.query.inquiry_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.list = res.data.data
            this.list.forEach((curr) => {
              curr.oauths.forEach((item) => {
                if (item.isEdit == -1) {
                  this.$set(item, 'oauth_type', '')
                } else {
                  this.$set(item, 'oauth_type', item.isEdit)
                }
              })
            })

            if (this.list[0].oauths[0].start_date) {
              this.start_date = this.list[0].oauths[0].start_date
              this.end_date = this.list[0].oauths[0].end_date
            }
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    },
    // 日期确认按钮
    onConfirm (date) {
      const [start, end] = date
      this.riqiShow = false
      this.start_date = this.formatDate(start)
      this.end_date = this.formatDate(end)
    },
    // 全选
    allSelect () {
      if (this.inquiry_id) {
        this.isAllselect = !this.isAllselect
        for (var i in this.list) {
          for (var k in this.list[i].oauths) {
            if (this.isAllselect === true) {
              this.list[i].oauths[k].oauth_type = 0
            } else {
              this.list[i].oauths[k].oauth_type = ''
            }
          }
        }
      } else {
        this.isAllselect = !this.isAllselect
        for (var i in this.list) {
          for (var k in this.list[i].oauths) {
            if (this.isAllselect === true) {
              this.list[i].oauths[k].oauth_type = 1
            } else {
              this.list[i].oauths[k].oauth_type = ''
            }
          }
        }
      }
    },
    // 确认按钮
    send () {
      if (!this.inquiry_id && (this.start_date === '' || this.end_date === '')) {
        Toast('请选择授权时间')
        return false
      }
      let allList = {
        userid: this.userid,
        Qlist: [],
        start_date: this.start_date,
        end_date: this.end_date
      }
      for (var i in this.list) {
        for (var k in this.list[i].oauths) {
          let obj
          obj = {
            'oauth_type': this.list[i].oauths[k].oauth_type,
            'oauth_id': this.list[i].oauths[k].id
          }
          if (this.list[i].oauths[k].oauth_type !== '') {
          } else {
            obj.oauth_type = '-1'
          }
          allList.Qlist.push(obj)
        }
      }
      if (allList.Qlist.length <= 0) {
        Toast('请选择授权内容')
        return false
      }
      this.qrcode = allList
      this.keep()
    },
    // 保存
    keep () {
      if (this.doc_user_id) {
        let inquiry_id = this.$route.query.inquiry_id
        let data_user_id = this.$route.query.data_user_id
        let doc_user_id = this.doc_user_id
        if (inquiry_id) {
          this.qrcode.inquiry_id = this.$route.query.inquiry_id
          delete this.qrcode.start_date
          delete this.qrcode.end_date
        }
        if (data_user_id) {
          this.qrcode.data_user_id = this.$route.query.data_user_id
        }
        if (doc_user_id) {
          this.qrcode.doc_user_id = this.doc_user_id
        }
        this.qrcode.oauths = this.qrcode.Qlist
        delete this.qrcode.Qlist
        this.$http.minihealthoauthSave(this.qrcode)
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (this.doc_user_name) {
                this.$toast('保存成功')
              } else {
                this.$toast('修改成功')
              }
              this.getHis()
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.saveOuthUserQrcode({qrcode: this.qrcode})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$router.push({path: '/erWeiMa', query: {id: res.data.data, userid: this.userid}})
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 查看
    justLook (item) {
      console.log(item)
      if (item.oauth_type !== 0) {
        item.oauth_type = 0
      } else {
        item.oauth_type = ''
      }
      this.isAllselect = false
    },
    // 修改
    justUpdate (item) {
      if (Number(item.oauth_type) !== 1) {
        item.oauth_type = 1
      } else {
        item.oauth_type = ''
      }
    },
    labelChange () {
      // console.log(this.activeNames)
    },
    getList () {
      this.$http.listHealthOauth({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.list = res.data.data
            for (let i in this.list) {
              for (let k in this.list[i].oauths) {
                this.$set(this.list[i].oauths[k], 'oauth_type', '')
              }
            }
            console.log(this.list)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
   header{
       width: 100%;
       height: 44px;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #E5E5E5;
       background: white;
       position: sticky;
       top: 0;
       z-index: 9;
     }
     .div{
       height: 100%;
       display: flex;
       align-items: center;
       font-family: "PingFang SC";
       font-size: 15px;
       font-weight: bold;
     }
     .div img{
       margin-right: 5px;
     }
     .div:nth-child(1) img{
       height: 13px;
       width: 7px;
       margin-left: 15px;
     }
     .div:nth-child(3) img{
       margin-right: 5px;
     }
     .div:nth-child(3) span{
       margin-right: 15px;
     }
     .div:nth-child(1){
       width: 25%;
     }
     .div:nth-child(2){
       width: 50%;
       display: flex;
       justify-content: center;
     }
     .div:nth-child(3){
       width: 25%;
       justify-content: flex-end;
     }
     .solid{
       color: #1DA4F2;
     }
 .jieshaoText{
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
   border-radius: 10px;
   line-height: 1.7;
   font-size: 13px;
   background: white;
 }
  .divLabel{
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .selectDiv {
    display: flex;
    align-items: center;
  }
   .selectDiv span{
     margin-left: 15px;
     display: flex;
     align-items: center;
   }
   .selectDiv span img{
     margin-right: 8px;
   }
   .imgSelect{
    width: 15px;
    height: 15px;
     margin-right: 5px;
  }
   .content{
     overflow: auto;
   }
  .bottom{
    width: 100%;
    position: fixed;
    bottom:50px;
    background: white;
  }
  .bottom div{
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
  }
   .riqi{
     height: 44px;
   }
  .bottom .allSelectDiv{
    height: 44px;
    justify-content: space-between;
  }
  .allSelectDiv span{
    display: flex;
    align-items: center;
  }
  .shuoming{
    width: 80%;
    font-size: 13px;
    color: #999999;
  }
   .label{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 15px;
     font-weight: 500;
     font-family: "PingFang SC";
     border-bottom: 1px solid #E5E5E5;
   }
   .label  input{
     width: 100px;
   }
   .label span{
     display: flex;
     align-items: center;
   }
   .inputBorder{
     width: 100px;
     height: 29px;
     border: 1px solid #1DA4F2;
     border-radius: 4px;
     margin-left: 5px;
     margin-right: 5px;
     text-align: center;
     font-size: 15px;
   }

  .box{
    padding: 10px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 8px;
    display: flex;
  }
  .all .box:last-of-type{
    margin-bottom: 60px;
  }
  .PHOTO{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }
  .box_left{
    width: 23%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .dict_name{
    font-size: 11px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    background: rgba(16, 184, 246, 0.1);
    color: #1da4f2;
    padding: 1px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-top: 10px;*/
  }
  .box_right{
    width: 78%;
  }
  .box_right ul{
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
  }
  .box_right ul li{
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    min-height: 25px;
  }
  .box_right ul li:nth-child(1){
    justify-content: space-between;
  }
  .name{
    font-size: 15px!important;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .selectDoctor{
    background: rgba(29, 164, 242, 0.1) !important;
  }
</style>
